<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="结算时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="balanceAccountsTime">
                <j-date placeholder="请选择结算时间"  v-model="model.balanceAccountsTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="customerSelectFlag">
              <a-form-model-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerId">
                <a-select
                  show-search
                  :allowClear="true"
                  placeholder="请选择客户"
                  option-filter-prop="children"
                  v-model="model.customerId"
                  style="width: 100%"
                  :filter-option="filterOptionCustomer"
                  @change="changeCustomer">
                  <a-select-option :value="item.id" v-for="(item,index) in customerData" :key="index">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="合同" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractId">
                <a-select
                  show-search
                  :allowClear="true"
                  placeholder="请选择合同"
                  option-filter-prop="children"
                  v-model="model.contractId"
                  style="width: 100%"
                  :filter-option="filterOptionDepositPay"
                  @change="changeDepositPay">
                  <a-select-option :value="item.id" v-for="(item,index) in depositPayData" :key="index">
                    {{item.contractName}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="money">
                <a-input-number v-model="this.currentDepositPay.money == null ? model.contractMoney:this.currentDepositPay.money" style="width: 100%" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountId">
                <a-select
                  show-search
                  :allowClear="true"
                  placeholder="请选择银行账户"
                  option-filter-prop="children"
                  v-model="model.bankAccountId"
                  style="width: 100%"
                  :filter-option="filterOptionBankAccount">
                  <a-select-option :value="item.id" v-for="(item,index) in accountData" :key="index">
                    {{item.accountName}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="结算金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="money">
                <a-input-number v-model="model.money" placeholder="请输入结算金额" style="width: 100%" disabled/>
              </a-form-model-item>
            </a-col>


            <a-col :span="24">
              <a-form-model-item label="收入类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="incomeType">
                <a-select v-model="model.incomeType" placeholder="请选择收入类型" style="width: 100%">
                  <a-select-option :value="item.value" v-for="(item,index) in incomeTypeData" :key="index">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="款项类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="clauseType">
                <a-select v-model="model.clauseType" placeholder="请选择款项类型" style="width: 100%">
                  <a-select-option :value="item.value" v-for="(item,index) in clauseTypeData" :key="index">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
                <a-input v-model="model.projectName" placeholder="请输入项目名称"  ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="结算名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="balanceAccountsName">
                <a-input v-model="model.balanceAccountsName" placeholder="请输入结算名称"  ></a-input>
              </a-form-model-item>
            </a-col>


            <a-col :span="24">
              <a-form-model-item label="结算类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="balanceAccountsType">
                <a-select v-model="model.balanceAccountsType" placeholder="请选择结算类型" style="width: 100%">
                  <a-select-option :value="item.value" v-for="(item,index) in balanceAccountsTypeData" :key="index">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-textarea v-model="model.remark" placeholder="请输入备注" :rows="3" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-button type="primary" style="width: 100%" @click="submitSave(1)">保存草稿</a-button>
            </a-col>
            <a-col :span="12">
              <a-button type="primary" style="width: 100%;" @click="submitSave(2)">保存并审批</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <!--<a-button type="primary" @click="handleOk" style="width: 100%;">保存</a-button>-->
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :footer="null"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">


  </j-modal>-->
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: 'addProjectBalanceModal',
    components: {},
    data () {
      return {
        id:'',
        title:'',
        width:'100%',
        visible: false,
        customerSelectFlag: false,
        depositPayId: 0,
        disableSubmit: false,
        accountData:[], //账户列表
        customerData:[],  //用户列表
        depositPayData:[],//定金合同，正式合同列表
        currentDepositPay: {},  //当前所选合同
        incomeTypeData:[
          {value:1,text:'主营业务收入'},{value:2,text:'其他业务收入'},{value:3,text:'营业外收入'},{value:4,text:'预收款'}
        ],
        clauseTypeData:[
          {value:1,text:'工程款'},{value:2,text:'定金'},
        ],
        balanceAccountsTypeData:[
          {value:1,text:'应收'},
        ],
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          balanceAccountsTime: [{ required: true, message: '请选择结算时间' }],
          customerId: [{ required: true, message: '请选择客户' }],
          contractId: [{ required: true, message: '请选择合同' }],
          bankAccountId: [{ required: true, message: '请选择银行账户' }],
          balanceAccountsName: [{ required: true, message: '请输入结算名称' }],
          incomeType: [{ required: true, message: '请选择收入类型' }],
          clauseType: [{ required: true, message: '请选择款项类型' }],
          projectName: [{ required: true, message: '请输入项目名称' }],
          balanceAccountsType: [{ required: true, message: '请选择结算类型' }],
        },
        url: {
          add: "/ghCustomerProjectBalanceAccounts/add",
          edit: "/ghCustomerProjectBalanceAccounts/edit",
          queryAccountDataList: "/ghFinanceAccount/queryAllAccountList",
          queryCustomerDataList: "/ghCustomerInfo/queryContractCustomer",
          queryDepositPayDataList: "/ghDepositPay/queryDepositPayDataList",
          queryById: "/ghDepositPay/queryById",
          getCustomerInfoById: '/ghCustomerInfo/getCustomerInfoById',
        },
        currentCustomerId: 0,
      }
    },
    created () {
      //备份model原始值
      //this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add(customerId) {
        this.visible = true;
        this.initAccountData();
        this.initCustomerData();
        if (customerId != null){
          this.currentCustomerId = customerId;
          this.initDepositPayData(customerId);
        }
      },
      edit(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.initAccountData();
        this.initCustomerData();
        this.currentCustomerId = record.customerId;
      },
      submitSave(status){
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.customerId) {
              this.model.customerId = this.currentCustomerId
            }
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            this.model.status = status;
            this.model.contractMoney = this.currentDepositPay.money;
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }

        })
      },
      //初始化银行账户数据
      initAccountData(){
        getAction(this.url.queryAccountDataList).then(res=>{
          if(res.success){
            this.accountData = res.result;
          }
        })
      },
      //初始化客户合同
      initDepositPayData(value){
        getAction(this.url.queryDepositPayDataList, {
          customerId: value,
          contractType: 2,
        }).then(res=>{
          if (res.success){
            this.depositPayData = res.result.records || res.result;
          }
        })
      },
      changeCustomer(value){
        this.depositPayData = [];
        this.currentDepositPay = {};
        this.currentCustomerId = value;
        this.initDepositPayData(value);
      },
      initCustomerData(){
        getAction(this.url.queryCustomerDataList).then(res=>{
          if (res.success){
            this.customerData = res.result;
          }
        })
      },
      changeDepositPay(value){
        getAction(this.url.queryById, {
          id: value
        }).then(res=>{
          if (res.success){
            this.currentDepositPay = res.result;
            this.model.money = this.currentDepositPay.money;
          }
        })
      },
      filterOptionBankAccount(input, option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOptionCustomer(input, option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOptionDepositPay(input, option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.customerSelectFlag = false;
        this.model = {};
        this.currentDepositPay = {};
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>